<template>
    <div class="wrap">
        <div>
            <div class="gswwUi-layout">
                <!--header-->
                <div class="header">
                    <Row>
                        <Col span="5">
                            <div @click="logoClick" class="logo"></div>
                        </Col>
                        <Col span="19">
                            <div class="changeSkin">
                                <!--<span>换肤：</span>-->
                                <div class="skinSelect-wraper">
                                    <a class="super" @click="showSkinChoose"><span
                                            v-bind:style="{'background-color':currentSkin.rgb}"></span></a>
                                    <ul v-show="themeActive">
                                        <li @click="changeSkin(item)" v-for="(item,index) in skinArray " :value="item"
                                            :key="index">
                                            <a class="sub">
                                                <span v-bind:style="{'background-color':item.rgb}"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!--<Select v-model="theme"-->
                                <!--@on-change="changeSkin"-->
                                <!--style="width:200px">-->
                                <!--<Option v-for="item in skinArray" :value="item.class" :key="item.class">{{ item.name }}</Option>-->
                                <!--</Select>-->
                            </div>
                            <div class="searchbox">
                                <AutoComplete
                                        placeholder="搜索组件..."
                                        style="width:200px"></AutoComplete>
                            </div>
                        </Col>
                    </Row>
                </div>
                <div class="main-wraper">
                    <Row>
                        <Col span="5">
                            <!--left nav -->
                            <div class="left">
                                <LeftNavigate :navigatorData="navigatorData"/>
                            </div>
                        </Col>
                        <Col span="19">
                            <!--content-->
                            <div class="content">
                                <router-view/>
                            </div>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
	import LeftNavigate from './components/LeftNavigate'
	import navigatorData from './components/config/navigate.js'

	export default {
		name: 'App',
		data() {
			return {
				theme: 'blue',
				currentSkin: {
					name: '蓝色',
					class: 'blue',
					rgb: 'rgba(74,144,226,1)',
				},
				themeActive: false,
				lang: this.$lang,
				navigatorData: navigatorData,
				modal1: false,
				skinArray: [{
					name: '蓝色',
					class: 'blue',
					rgb: 'rgba(74,144,226,1)',
				}, {
					name: '橙色',
					class: 'orange',
					rgb: 'rgba(245,166,35,1)',
				}, {
					name: '绿色',
					class: 'green',
					rgb: 'rgba(126,211,33,1)',
				}, {
					name: '紫色',
					class: 'violet',
					rgb: 'rgba(189,16,224,1)',
				}]
			}
		},
		beforeMount: function () {
			document.getElementsByTagName("body")[0].className = 'fabs-ui ' + this.theme;
		},
		computed: {
			// appClass() {
			// 	return 'fabs-ui ' + this.theme;
			// }
		},
		created() {
			this.lang = this.$lang = 'zh-CN';
		},
		components: {
			LeftNavigate,
		},
		methods: {
			logoClick(){
				this.$router.push('/');
            },
			showSkinChoose() {
				this.themeActive = true;
			},
			changeSkin(item) {
				this.theme = item.class;
				this.currentSkin = item;
				this.themeActive = false;
				document.getElementsByTagName("body")[0].className = 'fabs-ui ' + this.theme;
			},
			ok() {
				this.$Message.info('Clicked ok');
			},
			cancel() {
				this.$Message.info('Clicked cancel');
			}
		}
	}

</script>
<style lang="scss" scoped>


    .fabs-ui {
        font-size: 14px;
        color: #333;
    }

    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-header-bar {
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }

</style>
<style>
    pre {
        padding: 0;
        margin: 0
    }

    code {
        display: inline-block;
        background: #f7f7f7;
        font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
        margin: 0 3px;
        padding: 1px 5px;
        border-radius: 3px;
        color: #666;
        border: 1px solid #eee
    }

    pre code {
        display: inline;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent
    }

    pre.bg code {
        background: #f7f7f7
    }

    p {
        margin: 5px;
        font-size: 14px
    }

    a[target=_blank]:after {
        content: "\F220";
        font-family: Ionicons;
        color: #aaa;
        margin-left: 3px
    }
    ul{
        list-style: none;
    }
</style>
